// 商品分类
<template>
  <div>
    <Row class="page">
      <Col span="24">
      <Button type="primary" icon="plus-round" @click="modal1 = true">添加分类</Button>
      <Modal v-model="modal1" title="添加分类" @on-ok="ok" @on-cancel="cancel">
        <Form ref="formItem" :model="formItem" :label-width="100">
          <FormItem label="分类名称">
            <Input v-model="formItem.name" placeholder="分类名称"></Input>
          </FormItem>
          <FormItem label="分类介绍">
            <Input v-model="formItem.description" placeholder="分类介绍"></Input>
          </FormItem>
          <FormItem label="是否启用">
            <i-Switch v-model="status" @on-change="change"></i-Switch>
          </FormItem>
          <FormItem label="首页显示">
            <i-Switch v-model="is_index_show" @on-change="change1"></i-Switch>
          </FormItem>

          <FormItem label="分类图片">
            <Upload action="http://upload-z2.qiniup.com" :file-list="fileList" :data="updata" :on-success="files" :on-remove="removeFiles" :on-error="error">
              <Button icon="ios-cloud-upload-outline">上传图片200 * 200px</Button>
            </Upload>
          </FormItem>
        </Form>
      </Modal>
      </Col>
    </Row>
    <br>
    <Row class="page">
      <Col span="24">
      <Table border :columns="columns7" :data="data6"></Table>
      </Col>
    </Row>
    <br>
    <Row>
      <Page :total="100" @on-change="page" />
    </Row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      fileList:true,
      classtype: 1,
      imgs: "",
      updata: {
        key: Date.parse(new Date()) + ".jpg",
        token: ""
      },
      statuss: 0,
      is_index_shows: 0,
      status: false,
      is_index_show: false,
      list: [{ name: "1" }, { name: "2" }],
      index: 1,
      formItem: {
        description: "",
        name: "",
        is_index_show: "1",
        status: "1",
        create_user: "root",
        img: ""
      },
      modal1: false,
      columns7: [
        {
          title: "ID",
          key: "id",
          width: 100
        },
        {
          title: "分类名称",
          key: "name",
          render: (h, params) => {
            return h("div", [h("strong", params.row.name)]);
          }
        },
        {
          title: "分类介绍",
          key: "description"
        },
        {
          title: "当前状态",
          key: "number",
          render: (h, params) => {
            if (params.row.status == 1) {
              return "启用";
            } else {
              return "禁用";
            }
          }
        },
        {
          title: "首页显示",
          key: "number",
          render: (h, params) => {
            if (params.row.is_index_show == 1) {
              return "启用";
            } else {
              return "禁用";
            }
          }
        },
        {
          title: "操作",
          key: "caozuo",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      let _self = this;
                      $.ajax({
                        url: BASE_URL + "sortmanagement/delete",
                        type: "get",
                        data: {
                          id: params.row.id
                        },
                        success: function(res) {
                          console.log(res);
                          _self.getClass();
                        }
                      });
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  style: {
                    marginLeft: "10px"
                  },
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      let _self = this;
                      _self.classtype = 2;
                      $.ajax({
                        url: BASE_URL + "sortmanagement/edit",
                        type: "get",
                        data: {
                          id: params.row.id
                        },
                        success: function(e) {
                          console.log(e);
                          _self.classtype = 2;
                          _self.formItem = e;
                          _self.formItem.id = e.id;
                          if (e.is_index_show == 1) {
                            _self.is_index_show = true;
                          } else {
                            _self.is_index_show = false;
                          }
                          if (e.status == 1) {
                            _self.status = true;
                          } else {
                            _self.status = false;
                          }
                        }
                      });
                      _self.modal1 = true;
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      data6: [],
      value: "",
      numbers: "1"
    };
  },
  created() {
    this.getClass();
    this.getToken();
    this.page(this.numbers);
  },
  methods: {
    removeFiles: function() {
      this.getToken();
      this.updata.key = Date.parse(new Date()) + ".jpg";
    },
    getToken: function() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "upload/token",
        type: "get",
        success: function(e) {
          _self.updata.token = e;
        }.bind(this)
      });
    },
    error: function(response, file, fileList) {
      console.log(response, file, fileList);
    },
    files: function(res, file) {
      console.log(file);
      console.log(IMAGE_URL+'/' + res.key);
      this.formItem.img = IMAGE_URL+'/' + res.key;
    },

    page: function(number) {
      this.numbers = number;
      $.ajax({
        url: BASE_URL + "sortmanagement/groupGoodsClassPage",
        type: "get",
        data: {
          pageNumber: number,
          pageSize: 10
        },
        success: function(e) {
          console.log(e);
          this.data6 = e.list;
        }.bind(this)
      });
    },
    cancel() {
      this.$Message.info("Clicked cancel");
      this.modal1 = false;
    },
    ok: function() {
      let _self = this;
      if (_self.classtype == 1) {
        console.log(this.formItem);
        $.ajax({
          url: BASE_URL + "sortmanagement",
          type: "POST",
          data: {
            groupGoodsClass: JSON.stringify(this.formItem)
          },
          success: function(res) {
            console.log(res);
            _self.page(this.numbers);
            this.imgs = "";

            this.formItem = {
              description: "",
              name: "",
              is_index_show: "1",
              status: "1",
              create_user: "root",
              img: ""
            };
            this.status = false;
            this.is_index_show = false;
          }.bind(this)
        });
      } else {
        console.log(this.formItem);
        $.ajax({
          url: BASE_URL + "sortmanagement/update",
          type: "get",
          data: {
            groupGoodsClass: JSON.stringify(this.formItem)
          },
          success: function(res) {
            console.log(res);
            _self.page(this.numbers);

            this.formItem = {
              description: "",
              name: "",
              is_index_show: "1",
              status: "1",
              create_user: "root",
              img: ""
            };
            this.status = false;
            this.is_index_show = false;
            this.classtype = 1;
          }.bind(this)
        });
      }
    },
    change: function(status) {
      console.log(status);
      if (status) {
        this.formItem.status = 1;
      } else {
        this.formItem.status = 2;
      }
    },
    change1: function(is_index_show) {
      console.log(is_index_show);
      if (is_index_show) {
        this.formItem.is_index_show = 1;
      } else {
        this.formItem.is_index_show = 2;
      }
    },
    getClass: function() {
      $.ajax({
        url: BASE_URL + "sortmanagement",
        type: "get",
        success: function(data) {
          console.log(data);
          this.data6 = data;
        }.bind(this)
      });
    }
  }
};
</script>

<style scoped>
</style>
